<template>
  <div class="upload-demo">
    <el-upload drag action="#" accept=".xls,.xlsx" 
      :on-change="handleChange"
      :on-remove="handleRemove"
      :auto-upload="false"
      :limit="1"
      >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽到此 或 <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          请选择Excel文件上传
        </div>
      </template>
    </el-upload>
  </div>
  <div>
    <el-button type="primary" @click="finish">开始数据处理</el-button>
  </div>
</template>

<script>
import { UploadFilled } from '@element-plus/icons-vue';
import * as cache from '@/utils/cache';
import { readFile } from '../utils/excelUtils';

export default {
  name: 'HomePage',
  components: {
    UploadFilled,
  },
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleChange(file,fileList) {
      this.fileList = []
      fileList.forEach(fielItem => {
        this.fileList.push(fielItem)
      });
      
    },
    handleRemove(file) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
    },
    async finish() {
      cache.clear();
      if (this.fileList.length == 0) {
        this.$message.error('请先选择文件');
        return;
      }
  
      const excelList = await Promise.all(this.fileList.map(fileItem => readFile(fileItem.raw)));
      cache.set('excelList', excelList);
      this.$router.push('/functionchoose');
    },
  },
};
</script>

<style scoped>
.upload-demo {
  /* 添加一些基本样式 */
  margin: 20px;
}

.el-upload__text {
  font-size: 16px;
  color: #333;
}

.el-upload__tip {
  font-size: 14px;
  color: #999;
}
</style>